<script setup lang="ts">
import ApexCharts from "apexcharts";
import { useAttrs } from "vue";

const attr = useAttrs();
console.log(attr.remoteData);

function parseTime(time, pattern) {
  if (arguments.length === 0 || !time) {
    return null;
  }
  const format = pattern || "{y}-{m}-{d} {h}:{i}:{s}";
  let date;
  if (typeof time === "object") {
    date = time;
  } else {
    if (typeof time === "string" && /^[0-9]+$/.test(time)) {
      time = parseInt(time);
    } else if (typeof time === "string") {
      time = time.replace(new RegExp(/-/gm), "/");
    }
    if (typeof time === "number" && time.toString().length === 10) {
      time = time * 1000;
    }
    date = new Date(time);
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  };
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key];
    // Note: getDay() returns 0 on Sunday
    if (key === "a") {
      return ["日", "一", "二", "三", "四", "五", "六"][value];
    }
    if (result.length > 0 && value < 10) {
      value = "0" + value;
    }
    return value || 0;
  });
  return time_str;
}

const times = (function () {
  const date = new Date().getTime();
  return new Array(24 + 1)
    .fill("")
    .map((item, index) => {
      const time = date - Number(60 * 60 * 1000 * index);
      return parseTime(time, "{h}:{i}");
    })
    .reverse();
})();
const pageData = {
  series: [
    {
      name: "内存使用率",
      data: attr.remoteData
    }
  ],
  chartOptions: {
    chart: {
      height: 350,
      type: "bar",
      toolbar: {
        show: false,
      },
    },
    colors:['#a30c0c'],
    plotOptions: {
      bar: {
        borderRadius: 0,
        dataLabels: {
          position: "top" // top, center, bottom
        }
      }
    },
    dataLabels: {
      enabled: true,
      formatter: function (val) {
        return val + "%";
      },
      offsetY: -20,
      style: {
        fontSize: "12px",
        colors: ["#304758"]
      }
    },

    xaxis: {
      categories: times,
      position: "bottom",
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      },
      crosshairs: {
        fill: {
          type: "gradient",
          gradient: {
            colorFrom: "#D8E3F0",
            colorTo: "#BED1E6",
            stops: [0, 100],
            opacityFrom: 0.4,
            opacityTo: 0.5
          }
        }
      },
      tooltip: {
        enabled: true
      }
    },
    yaxis: {
      min: 0,
      max: 100,
      forceNiceScale: true,
      axisBorder: {
        show: true
      },
      axisTicks: {
        show: true
      },
      labels: {
        show: true,
        formatter: function (val) {
          return val + "%";
        }
      }
    },
    title: {
      text: "",
      floating: false,
      offsetY: 330,
      align: "center",
      style: {
        color: "#444"
      }
    }
  }
};
</script>
<template>
  <div>
    <h3 style="margin: 0px">内存</h3>
    <apexchart width="100%" height="350px" type="bar" :options="pageData.chartOptions" :series="pageData.series"></apexchart>
  </div>
</template>

<style scoped></style>
